import React from 'react'
import { useList } from './useList'
import { useName } from './useName'
import { useFilter } from './useFilter'

import './css/index.css'

export default function App() {
  const { name, handleChange } = useName()

  const { list } = useList()

  const { computedList } = useFilter(list, name)

  return (
    <div>
      <div className='search'>
        <input
          value={name}
          onChange={handleChange}
        />
      </div>

      <ul className='cinemaList'>
        {computedList.map((item) => {
          return (
            <li key={item.cinemaId}>
              <div className='cinemaName'>{item.name}</div>
              <div className='cinemaAddress'>{item.address}</div>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
